<template>
	<div id="app" v-loading="loading">
		<div class="title">
		<a class="backPage iconfont icon-icon-test" @click="$router.back(-1)"></a>
		兑换详情
		<div class="rightBotttom" v-if="false">
			<a class="iconfont icon-xiangyoujiantou-copy" style="font-size:21px;"></a>
			<a class="iconfont icon-xiangyou-copy"></a>
		</div>
		</div>
		<el-form class="form" label-position="top" v-if="detail != null">
			<el-row :gutter="25">
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="商品标题">
							<el-tooltip class="item" effect="dark" :content="detail.pro_info.product_name" placement="top-start">
								<div class="ell">{{detail.pro_info.product_name}}</div>
							</el-tooltip>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="花费积分">
							{{detail.pro_info.price}}
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="兑换时间">
							{{detail.pro_info.time_created | dateFormat}}
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="兑换用户">
							<router-link :to="`/user/detail/${detail.user_info.user_id}`" class="blue ell">{{detail.user_info.user_name}}</router-link>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="积分来源">
							<router-link :to="`/capital/integral/page/1/user_id/${detail.user_info.user_id}`" class="blue ell">查看</router-link>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="状态">
							<font v-if="detail.status==0" class="red">兑换失败</font>
							<font v-if="detail.status==1" class="gray">等待处理</font>
							<font v-if="detail.status==2" class="green">已发货</font>
							<font v-if="detail.status==3" class="red">拒绝发货</font>
							<el-button v-if="detail.status == 1" size="mini" style="margin-left:15px;" @click="handleShow = true;">发货</el-button>
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="商品类型">
							{{detail.pro_info.protype | proType}}
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4" :key="index" v-for="(item, index) in detail.user_input">
					<div class="grid-content bg-purple">
						<el-form-item :label="item.name">
							{{item.value}}
						</el-form-item>
					</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple">
						<el-form-item label="备注">
							<el-tooltip class="item" effect="dark" content="暂无" placement="top-start">
								<div class="ell">{{detail.remark}}</div>
							</el-tooltip>
						</el-form-item>
					</div>
				</el-col>
			</el-row>
		</el-form>

		<el-dialog title="提示" :visible.sync="handleShow" width="450px">
		<el-form style="margin-bottom:-25px;" v-loading="dialogLoading">
			<el-form-item>
				<el-radio-group v-model="shippingStatus" @change="onShippingChange">
					<el-radio :label="2">发货</el-radio>
					<el-radio :label="3">拒绝发货</el-radio>
				</el-radio-group>
				<el-input v-model.trim="shippingRemark" style="margin-top:15px;"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="handleShow = false">取 消</el-button>
			<el-button type="primary" @click="onShipping">确 定</el-button>
		</span>
		</el-dialog>
	</div>
</template>

<script>
import fetch from '@/api/axios';
import {tsToDateFormat} from '@/utils/tsToDateFormat';
const shippingTxts = ['','','恭喜您，您兑换的商品已成功发货，请注意查收。', '很遗憾的告诉您，您兑换的商品未能发货，原因：暂无。'];
export default {
	data() {
		return {
			handleShow:false,
			dialogLoading: false,
			shippingStatus: 2,
			shippingRemark: shippingTxts[2],
			loading: 1,
			id: 0,
			detail: null,

		}
	},
	filters: {
		dateFormat(t){
			return tsToDateFormat(t, 'yyyy/MM/dd hh:mm');
		},
		proType(t){
			return ['虚拟', '实物'][t]
		}
	},
	created(){
		this.id = this.$route.params.id;
		if(this.id){
			this.getDetail();
		}
	},
	methods: {
		getDetail(){
			let _this = this;
			this.loading = true;
			fetch.get('/api/console/user/score/exchange/log',{
                order_id: this.id
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.detail = data.data;
				}else{
					_this.$message.error(data.message);
				}
			}).catch((err)=>{
				_this.$message.error(err.message);
			}).finally(()=>{
				_this.loading = false;
			});
		},
		onShippingChange(val){
			this.shippingStatus = val;
			this.shippingRemark = shippingTxts[val];
		},
		onShipping(){
			let _this = this;
			this.handleShow = false;
			this.dialogLoading = true;
			fetch.post('/api/console/user/score/exchange/log',{
				order_id: this.id,
				deal: this.shippingStatus,
				package_remark: this.shippingRemark
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.$message.success('操作成功');
					_this.$router.go(-1);
				}else{
					_this.$message.error(data.message);
				}
			}).catch((err)=>{
				_this.$message.error(err.message);
			}).finally(()=>{
				_this.dialogLoading = false;
			});
		},
	},
	mounted() {

	}
}
</script>
<style lang="scss" scoped>
	.rightBotttom{
		float:right;
		a{
			height:36px;
			line-height:36px;
			text-align:center;
			display:block;
			margin-right:25px;
			font-size:23px;
			cursor: pointer;
			border-radius:3px;
			float:left;
			color:#d9d9d9;
			&:nth-last-child(1){
			margin-right:0;
			}
		}
	}
</style>